<template>
	<view class="container">
		<view class="header">
			<view class="search-bar">
				<text class="iconfont icon-search"></text>
				<input type="text" placeholder="搜索游戏或攻略" placeholder-class="placeholder" v-model="searchText" />
			</view>
			<scroll-view scroll-x class="category-scroll" show-scrollbar="false">
				<view class="category-tags">
					<text class="category-tag" 
						v-for="tag in categories" 
						:key="tag.id"
						:class="{ active: activeCategory === tag.id }"
						@click="setCategory(tag.id)">
						{{ tag.name }}
					</text>
				</view>
			</scroll-view>
		</view>
		
		<scroll-view scroll-y class="guide-list">
			<view class="guide-item" v-for="guide in filteredGuides" :key="guide.id" @click="navigateToGuideDetail(guide.id)">
				<view class="guide-header">
					<image :src="guide.game.logo" class="game-logo" mode="aspectFill" />
					<view class="guide-info">
						<text class="game-name">{{ guide.game.name }}</text>
						<text class="guide-type">{{ guide.category }}</text>
					</view>
					<view class="guide-stats">
						<text class="views">{{ guide.views }}阅读</text>
					</view>
				</view>
				
				<text class="guide-title">{{ guide.title }}</text>
				
				<view class="guide-preview" v-if="guide.cover">
					<image :src="guide.cover" mode="aspectFill" class="preview-image" />
					<text class="guide-desc">{{ guide.description }}</text>
				</view>
				<text v-else class="guide-desc full-width">{{ guide.description }}</text>
				
				<view class="guide-footer">
					<view class="author">
						<image :src="guide.author.avatar" class="author-avatar" mode="aspectFill" />
						<text class="author-name">{{ guide.author.name }}</text>
					</view>
					<view class="interactions">
						<view class="interaction-item">
							<text class="iconfont icon-like"></text>
							<text class="count">{{ guide.likes }}</text>
						</view>
						<view class="interaction-item">
							<text class="iconfont icon-comment"></text>
							<text class="count">{{ guide.comments }}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<view class="create-guide" @click="createGuide">
			<text class="iconfont icon-edit"></text>
			<text>写攻略</text>
		</view>
	</view>
</template>

<script>
import { games } from '../../../utils/gameData.js';

export default {
	data() {
		return {
			searchText: '',
			activeCategory: 'all',
			categories: [
				{ id: 'all', name: '全部' },
				{ id: 'new', name: '新手指南' },
				{ id: 'strategy', name: '通关攻略' },
				{ id: 'skill', name: '技巧心得' },
				{ id: 'equipment', name: '装备搭配' },
				{ id: 'secret', name: '隐藏要素' }
			],
			guides: []
		}
	},
	computed: {
		filteredGuides() {
			let filtered = this.guides;
			
			if (this.searchText) {
				const searchLower = this.searchText.toLowerCase();
				filtered = filtered.filter(guide => 
					guide.game.name.toLowerCase().includes(searchLower) ||
					guide.title.toLowerCase().includes(searchLower)
				);
			}
			
			if (this.activeCategory !== 'all') {
				filtered = filtered.filter(guide => guide.categoryId === this.activeCategory);
			}
			
			return filtered;
		}
	},
	created() {
		this.generateMockData();
	},
	methods: {
		generateMockData() {
			// 生成10条模拟攻略数据
			this.guides = Array(10).fill().map((_, index) => {
				const game = games[Math.floor(Math.random() * games.length)];
				const category = this.categories[Math.floor(Math.random() * this.categories.length)];
				
				return {
					id: `guide_${index}`,
					game: {
						name: game.game_name,
						logo: game.game_logo
					},
					categoryId: category.id,
					category: category.name,
					title: this.getRandomTitle(),
					description: this.getRandomDescription(),
					cover: Math.random() > 0.5 ? game.game_banner : '',
					author: {
						name: this.getRandomName(),
						avatar: '/static/tiwen.gif'
					},
					views: Math.floor(Math.random() * 10000),
					likes: Math.floor(Math.random() * 1000),
					comments: Math.floor(Math.random() * 100)
				};
			});
		},
		getRandomTitle() {
			const titles = [
				'新手必看攻略',
				'高分技巧分享',
				'隐藏关卡攻略',
				'装备搭配指南',
				'Boss战详解'
			];
			return titles[Math.floor(Math.random() * titles.length)];
		},
		getRandomDescription() {
			const descriptions = [
				'详细介绍游戏基础机制和入门技巧，帮助新手快速上手...',
				'分享多年游戏经验，教你如何快速提升战斗力...',
				'深度解析游戏隐藏要素，带你发现不为人知的彩蛋...',
				'最新版本装备搭配攻略，助你轻松过关...',
				'详细分析Boss弱点和攻击模式，教你轻松应对...'
			];
			return descriptions[Math.floor(Math.random() * descriptions.length)];
		},
		getRandomName() {
			const names = ['游戏达人', '攻略王', '资深玩家', '战神', '游戏专家'];
			return names[Math.floor(Math.random() * names.length)];
		},
		setCategory(categoryId) {
			this.activeCategory = categoryId;
		},
		navigateToGuideDetail(guideId) {
			uni.showToast({
				title: '查看攻略详情',
				icon: 'none'
			});
		},
		createGuide() {
			uni.navigateTo({
				url: '/pages/community/guide/create'
			});
		}
	}
}
</script>

<style scoped>
.container {
	min-height: 100vh;
	background: #1E1E2E;
	padding: 12px;
	position: relative;
	padding-bottom: 80px;
}

.header {
	background: #2D2D44;
	border-radius: 12px;
	padding: 15px;
	margin-bottom: 15px;
}

.search-bar {
	display: flex;
	align-items: center;
	background: #1E1E2E;
	border-radius: 20px;
	padding: 8px 15px;
	margin-bottom: 12px;
}

.search-bar input {
	flex: 1;
	margin-left: 8px;
	color: #9796B8;
	font-size: 14px;
}

.placeholder {
	color: #6E6C89;
}

.category-scroll {
	white-space: nowrap;
}

.category-tags {
	display: inline-flex;
	gap: 10px;
	padding: 4px 0;
}

.category-tag {
	padding: 4px 12px;
	border-radius: 15px;
	font-size: 14px;
	color: #6E6C89;
	background: #1E1E2E;
	white-space: nowrap;
}

.category-tag.active {
	background: #9796B8;
	color: #1E1E2E;
}

.guide-item {
	background: #2D2D44;
	border-radius: 12px;
	padding: 15px;
	margin-bottom: 12px;
}

.guide-header {
	display: flex;
	align-items: center;
	margin-bottom: 12px;
}

.game-logo {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	margin-right: 10px;
}

.guide-info {
	flex: 1;
}

.game-name {
	font-size: 14px;
	color: #6E6C89;
	margin-bottom: 4px;
}

.guide-type {
	font-size: 12px;
	color: #6E6C89;
	background: rgba(110, 108, 137, 0.1);
	padding: 2px 8px;
	border-radius: 10px;
	display: inline-block;
}

.guide-stats {
	font-size: 12px;
	color: #6E6C89;
}

.guide-title {
	font-size: 16px;
	color: #9796B8;
	font-weight: bold;
	margin-bottom: 10px;
	line-height: 1.4;
}

.guide-preview {
	display: flex;
	gap: 12px;
	margin-bottom: 12px;
}

.preview-image {
	width: 120px;
	height: 80px;
	border-radius: 8px;
	flex-shrink: 0;
}

.guide-desc {
	font-size: 14px;
	color: #6E6C89;
	line-height: 1.4;
}

.guide-desc.full-width {
	margin-bottom: 12px;
}

.guide-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid rgba(110, 108, 137, 0.1);
}

.author {
	display: flex;
	align-items: center;
	gap: 8px;
}

.author-avatar {
	width: 24px;
	height: 24px;
	border-radius: 12px;
}

.author-name {
	font-size: 13px;
	color: #6E6C89;
}

.interactions {
	display: flex;
	gap: 15px;
}

.interaction-item {
	display: flex;
	align-items: center;
	gap: 4px;
	color: #6E6C89;
	font-size: 13px;
}

.create-guide {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: #9796B8;
	color: #1E1E2E;
	padding: 10px 25px;
	border-radius: 25px;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.iconfont {
	font-size: 16px;
	color: #6E6C89;
}

.create-guide .iconfont {
	color: #1E1E2E;
}
</style> 